import {h, defineComponent, ref, getCurrentInstance, onMounted } from 'vue';
export default defineComponent({
    setup() {
        const setChart = ()=>{
            const echarts = getCurrentInstance()?.appContext.config.globalProperties.$echarts
            const myChart = echarts.init(document.getElementById('customerRate') as HTMLElement);
            myChart.setOption({
                backgroundColor: '#fff',
                series: [{
                    type: 'liquidFill',
                    radius: '70%',
                    center: ['50%', '40%'],
                    data: [0.38],
                    color: ['#027fff'],
                    amplitude: '8%',
                    waveLength: '80%',
                    phase: 'auto',
                    period: 'auto',
                    direction: 'right',
                    shape: 'circle',
                    waveAnimation: true,
                    animationEasing: 'linear',
                    animationEasingUpdate: 'linear',
                    animationDuration: 2000,
                    animationDurationUpdate: 1000,
                    outline: {
                        show: false,
                        borderDistance: 10,
                        itemStyle: {
                            opacity: 0.9, // 边框的透明度   默认为 1
                            borderWidth: 2, // 边框的宽度
                            shadowBlur: 4, // 边框的阴影范围 一旦设置了内外都有阴影
                            shadowColor: "#fff", // 边框的阴影颜色,
                            borderColor: '#0275ff' // 边框颜色
                        },
                    },

                    backgroundStyle: {
                        color: '#E3F7FF'
                    },

                    itemStyle: {
                        opacity: 0.95,
                        shadowBlur: 50,
                        shadowColor: 'rgba(0, 0, 0, 0.4)'
                    },
                    label: {
                        show: true,
                        color: '#294D99',
                        insideColor: '#fff',
                        fontSize: 20,
                        fontWeight: 'bold',
                        align: 'center',
                        baseline: 'middle',
                        position: 'inside'
                    },
                    emphasis: {
                        itemStyle: {
                            opacity: 0.8
                        }
                    }
                }]
            });
            window.addEventListener("resize", ()=> {
                myChart.resize();
            });
        }
        onMounted(setChart)

        return () => h(
            <div id="customerRate" style={{width:'100%', height:'180px'}}></div>
        )
    }
});